import React, { FC } from "react";
import { QuestionInfoType, QuestionInfoDefaultValue } from "./type";
import { Typography } from "antd";

const { Title, Paragraph } = Typography;
const QuestionInfoComponent: FC<QuestionInfoType> = (props) => {
  const { title = "", placeholder = "" } = { ...QuestionInfoDefaultValue, ...props };
  const titleList = placeholder.split("\n");
  return (
    <Typography>
      <Title style={{ textAlign: "center" }}>{title}</Title>
      <Paragraph style={{ textAlign: "center" }}>
        {titleList.map((item, index) => {
          return (
            <span key={index}>
              {index > 0 ? <br /> : null}
              {item}
            </span>
          );
        })}
      </Paragraph>
    </Typography>
  );
};
export default QuestionInfoComponent;
